<div v-cloak id="app" class="main-content">
    <div class="pages">
        <el-form label-width="150px">
            <el-form-item label="当前版本：">
                {{webBranch}} v{{webVersion}}
                <el-tag
                    @click="doUpgrade"
                    :hit="true"
                    size="small"
                    type="warning"
                    v-if="webUpdate"
                >
                    有新版本，请点此升级
                </el-tag>
                <el-tag type="info" size="mini" v-else>当前为最新版</el-tag>
            </el-form-item>
            <el-form-item label="云平台通信：">
                <el-tag :hit="true" size="small" v-if="webConnection">
                    通讯正常
                </el-tag>
                <el-tag :hit="true" size="small" type="danger" v-else>
                    通讯失败
                </el-tag>
            </el-form-item>
            <el-form-item label="绑定云平台：">
                <div v-if="isBind != 0">
                    {{identifier}}
                    <el-tag
                        @click="outerVisibleShow"
                        size="small"
                        :hit="true"
                        type="info"
                    >
                        重新绑定
                    </el-tag>
                </div>
                <div v-else>
                    <el-tag
                        @click="outerVisibleShow"
                        :hit="true"
                        type="danger"
                        size="small"
                    >
                        未绑定
                    </el-tag>
                </div>
            </el-form-item>
            <el-form-item label="授权认证：">
                {{webHost}}
                <el-tag
                    v-if="isApprove == 0"
                    :hit="true"
                    type="danger"
                    size="small"
                >
                    未认证
                </el-tag>
                <el-tag v-else :hit="true" size="small">已认证</el-tag>
            </el-form-item>
            <el-form-item label="运行环境：">
                {$_SERVER["SERVER_SOFTWARE"]}
            </el-form-item>
            <el-form-item label="服务器时间：">{{webTime}}</el-form-item>
        </el-form>

        <el-dialog
            width="520px"
            title="绑定云平台"
            :visible.sync="outerVisible"
            center
            :close-on-click-modal="false"
        >
            <el-dialog
                width="520px"
                title="注册云平台"
                :visible.sync="innerVisible"
                append-to-body
                center
                :close-on-click-modal="false"
            >
                <el-form :model="bindForm">
                    <el-form-item label="云平台账号">
                        <el-input
                            v-model="signForm.username"
                            autocomplete="off"
                            placeholder="请填写账号，建议使用手机号或QQ号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="云平台密码">
                        <el-input
                            type="password"
                            v-model="signForm.password"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="　确认密码">
                        <el-input
                            type="password"
                            v-model="signForm.repassword"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button @click="innerVisibleClose">取 消</el-button>
                        <el-button type="primary" @click="doSign">
                            注 册
                        </el-button>
                    </div>
                </el-form>
            </el-dialog>
            <el-form :model="bindForm">
                <el-form-item label="云平台账号">
                    <el-input
                        v-model="bindForm.username"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="云平台密码">
                    <el-input
                        type="password"
                        v-model="bindForm.password"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item class="sign-box">
                    <el-tag
                        @click="innerVisibleShow"
                        :hit="true"
                        type="info"
                        size="small"
                        effect="dark"
                    >
                        没有账号？点击注册云平台
                    </el-tag>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="outerVisibleClose">取 消</el-button>
                <el-button type="primary" @click="reBind">绑 定</el-button>
            </div>
        </el-dialog>

        <el-dialog
            title="版本列表 - 禁止跨版本更新，否则后果自负！若版本差异太多，请直接下载完整包！"
            :visible.sync="upgradeListVisible"
            :fullscreen="true"
            @close="dialogClosed"
        >
            <el-tag type="danger" @click="goBackSql">
                为了防止升级过程中出现数据丢失等问题，建议您在升级前先备份数据库！！！→
                点此备份数据库 ←
            </el-tag>
            <div class="padding-bottom"></div>
            <el-table
                :data="upgradeList"
                height="80vh"
                :border="true"
                :highlight-current-row="true"
            >
                <el-table-column
                    fixed
                    property="branch"
                    label="版本类型"
                    width="150"
                ></el-table-column>
                <el-table-column
                    property="version"
                    label="版本号"
                    width="200"
                ></el-table-column>
                <el-table-column
                    property="release"
                    label="更新日志"
                ></el-table-column>
                <el-table-column
                    property="create_time"
                    label="更新时间"
                ></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="success"
                            @click="handleUpgrade(scope.$index, scope.row)"
                        >
                            更新至此版本
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</div>

<script>
    const _host = "{:get_domain(false)}";
    let _time = '{:date("Y年n月j日 H:i:s")}';
    let _identifier = "{:config('one_cloud.identifier')}";
    let _version = "{:config('one.version')}";
    let _branch = "{:config('one.branch')}";
    new Vue({
        el: "#app",
        data() {
            return {
                bindForm: {},
                signForm: {},
                isBind: 0,
                identifier: "",
                isApprove: 0,
                webConnection: false,
                webHost: _host,
                webTime: _time,
                webVersion: _version,
                webBranch: _branch,
                webUpdate: 0,
                outerVisible: false,
                innerVisible: false,
                upgradeListVisible: false,
                upgradeList: [],
                loadingModel: null,
            };
        },
        watch: {
            identifier(newVal) {
                this.identifier =
                    newVal.substring(0, 3) +
                    "****" +
                    newVal.substr(newVal.length - 4);
            },
        },
        mounted() {
            this.identifier = _identifier;
        },
        created() {
            // 获取版本信息
            this.connection();
        },
        methods: {
            connection() {
                this.showLoading();
                request({
                    url: "system/upgrade/getConnection",
                    method: "get",
                }).then((e) => {
                    this.closeLoading();
                    this.webConnection = true;
                    this.isBind = e.data.data.code;
                    this.isApprove = e.data.data.approve;
                    this.webUpdate = e.data.data.upgrade;
                });
            },
            doUpgrade() {
                this.showLoading();
                request({
                    url: "system/upgrade/getConnection",
                    method: "get",
                }).then((e) => {
                    this.isBind = e.data.data.code;
                    this.isApprove = e.data.data.approve;
                    this.webUpdate = e.data.data.upgrade;
                    if (e.data.data.code == 0 || e.data.data.approve == 0) {
                        this.$message.error("请先绑定云平台并获取认证");
                        return;
                    }
                    // 打开版本列表
                    this.getUpgradeList();
                });
            },
            getUpgradeList() {
                request({
                    url: "system/upgrade/lists",
                    method: "post",
                }).then((e) => {
                    this.closeLoading();
                    this.upgradeListVisible = true;
                    this.upgradeList = this.formatData(e);
                });
            },
            reBind() {
                this.showLoading();
                request({
                    url: "system/upgrade/index",
                    method: "post",
                    data: {
                        account: this.bindForm.username,
                        password: this.bindForm.password,
                        type: 1,
                    },
                }).then((e) => {
                    this.closeLoading();
                    if (e.data.code != 0) {
                        this.$message.error(e.data.msg);
                        return;
                    }
                    this.connection();
                    this.outerVisible = false;
                    this.$message({
                        message: "绑定成功",
                        type: "success",
                    });
                    setTimeout((v) => {
                        location.reload();
                    }, 800);
                });
            },
            doSign() {
                this.showLoading();
                request({
                    url: "system/upgrade/index",
                    method: "post",
                    data: {
                        account: this.signForm.username,
                        password: this.signForm.password,
                        repassword: this.signForm.repassword,
                        type: 2,
                    },
                }).then((e) => {
                    this.connection();
                    if (e.data.code != 0) {
                        this.$message.error(e.data.msg);
                        return;
                    }
                    this.innerVisible = false;
                    this.$message({
                        message: "注册成功",
                        type: "success",
                    });
                    setTimeout((v) => {
                        location.reload();
                    }, 300);
                });
            },
            innerVisibleClose() {
                this.signForm = {};
                this.innerVisible = false;
            },
            innerVisibleShow() {
                this.innerVisible = true;
            },
            outerVisibleShow() {
                this.outerVisible = true;
            },
            outerVisibleClose() {
                this.bindForm = {};
                this.outerVisible = false;
            },
            handleUpgrade(index, row) {
                this.showLoading();
                request({
                    url: "system/upgrade/download",
                    method: "post",
                    params: {
                        version: row.version,
                    },
                }).then((e) => {
                    this.closeLoading();
                    if (e.data.code != 0) {
                        this.$message.error(e.data.msg);
                        return;
                    }
                    this.$message({
                        message: "升级成功",
                        type: "success",
                    });
                    this.getUpgradeList();
                });
            },
            goBackSql() {
                navigateTo({
                    s: "system/database/index",
                });
            },
            showLoading() {
                this.loadingModel = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
            },
            closeLoading() {
                this.loadingModel.close();
            },
            dialogClosed() {
                setTimeout((v) => {
                    location.reload();
                }, 300);
            },
            formatData(data){
            	return Object.values(data.data.data);
            }
        },
    });
</script>

<style scoped>
    .el-tag {
        cursor: pointer;
    }
    .sign-box {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    .dialog-box {
        border-radius: 20px;
    }
    .dialog-footer {
        text-align: center;
    }
    .padding-bottom {
        padding-bottom: 10px;
    }
</style>
